<template>
	<view>
		<swiper :style="{height:windowHeight+'px'}" :vertical="true" @change="onSwiperChange" :current="currentIndex">
			<swiper-item v-for="(item,index) in videos">
				<view style="display: flex;width: 100%;height: 100%;">
					<video style="height: 300px;width:100%;" :id="'video'+index" :src="item.path"
						@loadedmetadata="loadCom($event,index)" :show-progress="true" :show-fullscreen-btn="true"
						:show-play-btn="false" :show-center-play-btn="true" @click="clickVideo(index)"
						:play-strategy="0"></video>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videos: [{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/ep14-%E8%94%A1%E5%8A%A0%E5%BD%AC%E8%82%9D%E7%99%8C%E6%96%B0%E6%B2%BB%E7%96%97%E5%8A%9E%E6%B3%95%E5%8F%8A%E4%B8%B4%E5%BA%8A%E8%AF%95%E9%AA%8C1733667862863.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/ep131733387250068.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/12%E6%9C%882%E6%97%A51733109779006.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E5%A4%A9%E7%84%B6%E6%8A%97%E7%99%8C%E5%89%8221733290728168.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/stodownload1729242972446.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/3dcf0e554e30d24397967cfba357fcdb1729243235028.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/23531524271f7a1e497450d996f91f4c1729674107965.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/video%282%291731481808347.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8814%E6%97%A5%282%291731636079923.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8817%E6%97%A5%281%291731845818973.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8818%E6%97%A51732011504798.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8819%E6%97%A51732007426515.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8820%E6%97%A5%20%281%291732097861150.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E7%AC%AC7%E6%9C%9F%E8%94%A1%E5%8A%A0%E5%BD%AC%28%E6%94%B9%291732239669588.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E7%AC%AC8%E6%9C%9F-%E6%B2%88%E6%85%A7%E6%80%A11732504648781.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8826%E6%97%A51732637996150.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8828%E6%97%A51732776318887.mp4'
					},
					{
						"path": 'https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/3dcf0e554e30d24397967cfba357fcdb1732072470264.mp4'
					}
				],
				windowHeight: 0,
				currentIndex: 0
			}
		},

		onLoad() {
			this.windowHeight = uni.getWindowInfo().windowHeight;
		},
		methods: {
			onSwiperChange(e) {
				console.log(e.detail.current)
				this.currentIndex
			},

			loadCom(e, index) {
				let that = this;
				if (index == this.currentIndex) {
					this.playVideo(this.currentIndex);
				}
			},

			playVideo(index) {
				let that = this;
				const currentVideo = uni.createVideoContext(`video${index}`, that);
				let temp = JSON.parse(JSON.stringify(that.videos[index]));
				temp['isPlay'] = true;
				that.$set(that.videos, index, temp);
				currentVideo.play();
			},
		}
	}
</script>

<style>

</style>